<template>
	<view class="bg min100 pt-1">
		<view class="header">
			<view class="w100" :style="{height:height+'px'}"></view>
			<u-sticky bg-color="none">
				<u-tabs :height="90" class="tab" bg-color="none" active-color="#fff" inactive-color="#FEE9DA" :list="tablist" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
			</u-sticky>
		</view>

		<view class="list">
			<!-- item -->
			<empty top="150" v-if="total === 0"></empty>
			<view class="mlr-36 mt-20 bg-white radius-10" v-for="(item,i) in list" :key="i" @longpress="showMoel(item.id)">
				<view class="flex bb ptb-20 mlr-20" @click="toDetail(item.id)">
					<view class="flex_l">
						<view class="ml-20 size-28">订单编号：{{item.order_no}}</view>
					</view>
					<view class="yellow size-26">{{item.status_text}}</view>
				</view>
				<view class="ptb-20 plr-20">
					<view class="flex_l" @click="toDetail(item.id)">
						<image :src="item.images[0]" class="radius-10" style="width: 180rpx; height: 180rpx;" mode="" v-if="item.images[0]"></image>
						<view class="ml-20 u-flex-1 over-hidden">
							<view class="bold u-line-1">{{item.product_name}}</view>
							<view class="size-26 mt-10 gray-2">下单时间：{{item.createtime_text}}</view>
							<view class="size-26 mt-10 gray-2">预约时间：{{item.scheduledtime_text}}</view>
							<view class="size-26 mt-10 gray-2">联系人：{{item.username}}</view>
							<view class="size-26 mt-10 gray-2">联系电话：<text class="red">{{item.mobile}}</text></view>
						</view>
					</view>
					<view class="flex_r">
						<view @click="toEval(item.id)" v-if="item.status==2 && !item.is_appraise"
							class="border-yellow center mt-20 yellow radius-10 mr-20"
							style="width: 156rpx;height: 52rpx;">立即评价</view>
					</view>
				</view>

			</view>
			<u-loadmore v-show="list.length && list.length <= total" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
		</view>
		<!-- <u-modal v-model="show" content="是否删除该订单" :show-title="false" :show-cancel-button="true" @confirm="del"></u-modal> -->
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				tablist: [{
					name: '全部'
				}, {
					name: '待接单'
				}, {
					name: '已接单'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				current: 0,
				status: 'loadmore',
				list: [],
				page: 1,
				total: null,
				id: '',
				show: false
			};
		},
		computed:{
			...mapState(['height'])
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.status = "loadmore"
			this.getList()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
		onShow() {
			this.page = 1
			this.list = []
			this.status = "loadmore"
			this.getList()
		},
		methods: {
			getList() {
				let query = {page: this.page}
				if (this.current == 1) {
					query.status = 0;
				} else if (this.current == 2) {
					query.status = 1;
				} else if (this.current == 3) {
					query.status = 2;
				} else if (this.current == 4) {
					query.status = 6;
				}
				this.status = "loading";
				this.$http('/api/order/index', query, "POST").then(data => {
					this.list = this.list.concat(data.rows);
					this.total = data.total;
					if (this.list.length >= data.total) {
						this.status = "nomore";
					} else {
						this.page = this.page + 1
						this.status = "loadmore";
					}
					uni.stopPullDownRefresh();
				});
			},
			change(index) {
				this.current = index;
				this.page = 1
				this.list = []
				this.status = "loadmore"
				this.getList()
			},
			toPay(id) {
				uni.navigateTo({
					url: '/pages/home/pay?order_id=' + id
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/order/order-detail?order_id=' + id
				})
			},
			toEval(id) {
				uni.navigateTo({
					url: '/pages/order/evaluate?order_id=' + id
				})
			},
			showMoel(id) {
				this.id = id;
				this.show = true;
			},
			del() {
				this.$http('/api/order/del', {
					id: this.id
				}, "POST").then(data => {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					this.page = 1
					this.list = []
					this.status = "loadmore"
					this.getList()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		height: 212rpx;
		background: url(../../static/header-bg.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
